<template>
  <el-dialog :visible.sync="visible" custom-class="userDialog-wrapper" :before-close="handleClose" width="75%">
    <el-form :model="userform" :rules="rules" ref="userform" size="mini">
      <div class="userform-content">
        <el-row style="margin-bottom: 1vh">
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" prop="name">
                <span slot="label" class="form-title">
                  用户名
                </span>
              <el-input v-model="userform.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 1vh">
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" prop="password">
                <span slot="label" class="form-title">
                  用户密码
                </span>
              <el-input v-model="userform.password" show-password></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 此处以下为新增内容 -->
        <el-row style="margin-bottom: 1vh">
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" prop="pw_repeat">
                <span slot="label" class="form-title">
                  确认密码
                </span>
              <el-input v-model="userform.pw_repeat" show-password></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 新增内容结束 -->
        <el-row style="margin-bottom: 1vh">
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" prop="typename">
                <span slot="label" class="form-title">
                  岗位
                </span>
              <el-select v-model="userform.typename" multiple collapse-tags style="width: 420px">
                <el-option
                  v-for="item in postOptions"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 1vh">
            <el-col :span="8">
              <el-form-item :label-width="formLabelWidth" prop="type">
                <span slot="label" class="form-title">
                  角色类型
                </span>
                <el-select v-model="userform.type" collapse-tags style="width: 120px">
                  <el-option
                    v-for="item in roleOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" prop="belongFactory" v-if="(this.$store.getters.getFactory).includes('superadmin')">
                <span slot="label" class="form-title">
                  所属场站
                </span>
              <el-select v-model="userform.belongFactory" collapse-tags style="width: 200px">
                <el-option
                  v-for="item in belongFactoryOptions"
                  :key="item.identification"
                  :label="item.name"
                  :value="item.identification">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div slot="title" style="font-size: 20px" v-if="dialogKind === 0">
      修改信息
    </div>
    <div slot="title" style="font-size: 20px" v-else>
      添加信息
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button class="el-green-button" @click="submitForm('userform')" type="primary">保存</el-button>
      <el-button class="el-red-button" @click="handleClose" type="info">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/network/request'
export default {
  name: 'currencyDialog',
  watch: {
    visibleFlag: function (newValue) {
      this.visible = newValue
    }
  },
  mounted () {
    this.visible = this.visibleFlag
  },
  created () {
    this.getOptions()
    if (this.$store.getters.getFactory.includes('superadmin')) {
      this.options.push({
        value: '管理员',
        label: '管理员'
      })
    }
  },
  data () {
    return {
      formLabelWidth: '120px',
      visible: false,
      // postOptions: [],
      belongFactoryOptions: [],
      // postOptions: [{
      //   value: '生活垃圾机械化分类场站',
      //   label: '生活垃圾机械化分类场站'
      // }, {
      //   value: '黑水虻培育岗位',
      //   label: '黑水虻培育岗位'
      // }, {
      //   value: '黑水虻种虫养殖岗位',
      //   label: '黑水虻种虫养殖岗位'
      // }, {
      //   value: '黑水虻垃圾处理岗位',
      //   label: '黑水虻垃圾处理岗位'
      // }, {
      //   value: '四季青有机资源再生中心称重岗位',
      //   label: '四季青有机资源再生中心称重岗位'
      // }, {
      //   value: '四季青有机资源再生中心固液分离岗位',
      //   label: '四季青有机资源再生中心固液分离岗位'
      // }, {
      //   value: '四季青有机资源再生中心絮凝岗位',
      //   label: '四季青有机资源再生中心絮凝岗位'
      // }, {
      //   value: '四季青有机资源再生中心堆肥岗位',
      //   label: '四季青有机资源再生中心堆肥岗位'
      // }, {
      //   value: '四季青有机资源再生中心水处理岗位',
      //   label: '四季青有机资源再生中心水处理岗位'
      // }, {
      //   value: '四季青有机资源再生中心除臭岗位',
      //   label: '四季青有机资源再生中心除臭岗位'
      // }, {
      //   value: '四季青有机资源再生中心系统修理岗位',
      //   label: '四季青有机资源再生中心系统修理岗位'
      // }],
      postOptions: [
        '生活垃圾机械化分类场站设备运行时间表',
        '生活垃圾机械化分类场站堵塞清掏纪录表',
        '生活垃圾机械化分类场站异常垃圾登记表',
        '生活垃圾机械化分类场站除臭剂喷洒时间表',
        '生活垃圾机械化分类场站瓶分机可腐物分拣数据记录表',
        '生活垃圾机械化分类场站易净场站出售废品登记表',
        '生活垃圾机械化分类场站可燃物、可腐物储料箱清运记录表',
        '生活垃圾机械化分类场站可燃物、可腐物箱内剩余记录表',
        '生活垃圾机械化分类场站设备保养计划及记录表',
        '生活垃圾机械化分类场站故障维修原始记录表',
        '生活垃圾机械化分类场站水记录表',
        '生活垃圾机械化分类场站电记录表',
        '生活垃圾机械化分类场站除臭塔换水记录',
        '黑水虻培育岗位', '黑水虻种虫养殖岗位',
        '黑水虻垃圾处理岗位', '黑水虻温湿度',
        '四季青有机资源再生中心称重岗位',
        '四季青有机资源再生中心固液分离岗位',
        '四季青有机资源再生中心絮凝岗位',
        '四季青有机资源再生中心堆肥岗位',
        '四季青有机资源再生中心水处理岗位',
        '四季青有机资源再生中心除臭岗位',
        '四季青有机资源再生中心系统修理岗位'],
      roleOptions: [{
        value: '管理人员',
        label: '管理人员'
      }, {
        value: '一线员工',
        label: '一线员工'
      }]
    }
  },
  props: {
    visibleFlag: { type: Boolean, required: true },
    dialogKind: { type: Number, required: true, default: 1 }, // 0:修改信息dialog；1：增加信息dialog
    userform: { type: Object, required: true },
    rules: { type: Object, required: true },
    userId: { type: String }
  },
  methods: {
    getOptions () {
      request({
        method: 'get',
        url: '/url/get',
        params: {
          pageSize: 1000,
          currentPage: 1
        }
      }).then((res) => {
        this.belongFactoryOptions = res.data.data
        this.belongFactoryOptions = this.belongFactoryOptions.filter(item => (!item.name.includes('超级管理')))
      })
      if (this.$store.getters.getFactory !== 'superadmin') {
        request({
          method: 'get',
          url: '/url/getPost',
          params: {
            identification: this.$store.getters.getFactory
          }
        }).then((res) => {
          this.postOptions = res.data.data
          // this.belongFactoryOptions = this.belongFactoryOptions.filter(item => (!item.name.includes('超级管理')))
        })
      }
    },
    handleClose () {
      this.$emit('close-dialog')
    },
    submitForm (formName) {
      const userForm = this.userform
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.userform.password !== this.userform.pw_repeat) {
            this.$message.error('请检查两次密码是否一致!')
          } else {
            let baseurl
            switch (this.dialogKind) {
              case 0 : {
                baseurl = `/user/update?id=${this.userId}&`
                break
              }
              case 1 : {
                baseurl = '/user/add?'
                break
              }
            }
            let permissionLevel = ''
            let position = ''
            console.log(userForm.typename)
            for (let i = 0; i < userForm.typename.length; i++) {
              if (userForm.typename[i].search('管理员') !== -1) {
                permissionLevel = '0'
                position = '管理员'
                break
              } else {
                position += userForm.typename[i] + ' '
                permissionLevel += userForm.typename[i]
              }
            }
            position = position.trim()
            permissionLevel = permissionLevel.trim()
            if (userForm.belongFactory === undefined) {
              userForm.belongFactory = this.$store.getters.getFactory
            }
            request({
              method: 'post',
              url: `${baseurl}password=${userForm.password}&permission_level=${permissionLevel}
                      &name=${userForm.name}&position=${position}&type=${userForm.type}&factory=${userForm.belongFactory}`
            }).then((res) => {
              if (res.data.code === 200 && res.data.message === 'SUCCESS') {
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                })
                this.handleClose()
              } else if (res.data.message !== 'SUCCESS') {
                this.$message.error(res.data.message)
              } else if (res.data.code === 400) {
                this.$message.error(res.message)
              } else {
                this.$message.error('保存失败!')
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .userform-content{
    /*padding: 10px;*/
    display: flex;
    margin-right: 5px;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
  }
  .dialog-footer{
    margin-top: 30px;
  }
</style>
